import styles from './login.module.scss'
import { Col, Row, Form, Input, Button, ConfigProvider, theme } from 'antd';
import { useSelector, useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom';
import { HappyProvider } from '@ant-design/happy-work-theme';
import { useState } from 'react';
import { axios_admin_login } from "@/store/AdminStore"
import type { AppDispatch } from "@/store"
import AdminGuard from "@/guard/Admin"
const Login = () => {
    const [codes, setCode] = useState("http://127.0.0.1:3001/user/code")
    const navigate = useNavigate()
    const dispatch = useDispatch<AppDispatch>()
    const thems = useSelector((state: any) => state.Appstore.theme)

    type FieldType = {
        username?: string;
        password?: string;
    };
    const onFinish = async (e: object) => {

        const res = await dispatch(axios_admin_login(e))

        if (res) {
            navigate("/backstage")
        }


    }
    const onFinishFailed = (e: object) => {
        console.log(e, '222')
    }
    return (

        <AdminGuard>
            <div className={`${thems ? styles.R_light : styles.R_dark}`}>
                <ConfigProvider
                    theme={{
                        algorithm: thems ? theme.defaultAlgorithm : theme.darkAlgorithm,

                    }}
                >
                    <div style={{ width: "100%", height: "100vh", display: "flex", flexDirection: "column", justifyContent: "center", }}>
                        <Row justify={"center"}>
                            <Col xs={16} sm={12} md={10} lg={8} xl={6} >

                                <div className={styles.login} style={{
                                    boxShadow: thems ? '0 0 40px #E9C46A' : '0 0 30px #eee',
                                    color: thems ? 'black' : 'white',
                                    background: thems ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.8)', display: "flex", flexDirection: "column", alignItems: "center"
                                }}>
                                    <p style={{ textAlign: 'center', fontWeight: "bold", marginBottom: "10px" }}>后台登录</p>
                                    <Form
                                        name="basic"
                                        wrapperCol={{ span: 24 }}
                                        initialValues={{ remember: true }}
                                        style={{ maxWidth: 400 }}

                                        onFinish={onFinish}
                                        onFinishFailed={onFinishFailed}
                                    >
                                        <Form.Item<FieldType>
                                            label="账号"
                                            name="username"
                                            rules={[{ required: true, message: '输入账号!' }]}
                                        >
                                            <Input />
                                        </Form.Item>

                                        <Form.Item<FieldType>
                                            label="密码"
                                            name="password"
                                            rules={[{ required: true, message: '输入密码' }]}
                                        >
                                            <Input.Password autoComplete={"off"} />
                                        </Form.Item>

                                        <Form.Item
                                            name="code"
                                            rules={[{ required: true, message: '输入验证码' }]}
                                        >
                                            <div style={{ display: 'flex', justifyContent: "space-between", width: "100%" }}>
                                                <Input placeholder='验证码' />
                                                <img onClick={() => {
                                                    setCode(`http://127.0.0.1:3001/user/code?` + Date.now())
                                                }} style={{ height: "40px" }} src={codes} alt="" />
                                            </div>
                                        </Form.Item>

                                        <Form.Item>
                                            <div style={{ width: "100%", display: "flex", justifyContent: "center" }}>
                                                <HappyProvider>
                                                    <Button htmlType="submit">
                                                        登录
                                                    </Button>
                                                </HappyProvider>
                                            </div>

                                        </Form.Item>
                                    </Form>
                                </div>

                            </Col>

                        </Row>
                    </div>
                </ConfigProvider>
            </div>
        </AdminGuard>
    )
}

export default Login